import React, { PureComponent } from 'react'
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Divider } from '../../widgets'
import {Element} from "rc-banner-anim";

const firstImg = require('../../assets/liucheng/liucheng1.jpg')
const secondImg = require('../../assets/liucheng/liucheng2.jpg')
const thirdImg = require('../../assets/liucheng/liucheng3.jpg')
const arrowImg = require('../../assets/liucheng/liucheng_jiantou.png')

const BgElement = Element.BgElement;

const bj1 =require('../../assets/bj/baojia1.jpg')
const bj2 = require('../../assets/bj/baojia2.jpg')

export default class extends PureComponent {
  static defaultProps = {
    className: 'content15',
  };

  getDelay = e => e % 3 * 100 + Math.floor(e / 3) * 100 + 300;


  getChildAni = (idx) => {
    const delay = this.getDelay(idx * 2);
    const liAnim = { opacity: 0, type: 'from', ease: 'easeOutQuad', delay };
    const childrenAnim = { ...liAnim, x: '+=10', delay: delay + 100,};
    return childrenAnim
  }

  render() {
    const props = { ...this.props };
    const isMode = props.isMode;
    delete props.isMode;
    const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };

    return (
      <div {...props} className={`content-template-wrapper ${props.className}-wrapper`}>
        <OverPack
          className={`content-template ${props.className}`}
          playScale="0.4"
          location={props.id}
        >
          <TweenOne
            key="h1"
            animation={oneAnim}
            component="div"
            className={`${props.className}-tit`}
            reverseDelay={100}
          >
            <div className={`${props.className}-tit-t`}>产品报价</div>
            <Divider style={{backgroundColor: 'white'}}/>
          </TweenOne>
          <div
            key="ul"
            type="bottom"
            className={`${props.className}-contentWrapper`}>
            <TweenOne key="left" className="cell" animation={{ ...this.getChildAni(1)}}>
              <img className="cellImg" src={bj1} />
            </TweenOne>
            <TweenOne key="right" className="cell" animation={{ ...this.getChildAni(5)}}>
              <img className="cellImg" src={bj2} />
            </TweenOne>
          </div>
        </OverPack>
      </div>
    )
  }
}
